import Taro, { Component } from '@tarojs/taro'
import { View, Text } from '@tarojs/components'
import { DNavBar, DAtInpute } from '@/components'
import { AtForm } from 'taro-ui'
import http from '@/api'
import './selectbusiness.scss'

export default class SelectbusinessBox extends Component {

    constructor(props) {
        super(props)
        this.state = {
            list: [],
            itemlist: [],
            company: '',
            status: false,
            itemStatus: true
        }
    }

    getList(company,_that) {
        let _obj = {
            page: 1,
            limit: 10,
            searchData: company,
            eaIsAppro: '1'
        }
        http.getEnterpriseList(_obj).then(res => {
            setTimeout(() => {
                if (res.list && res.list.length > 0) {
                    let { list } = _that.state
                    res.list.map(item => {
                        list.push({
                            // id: item.id,
                            company: item.entName,
                            entAddr: item.entAddr,
                            entAtt: item.entAtt,
                            entDis:item.entDis,
                            entDisDetail: item.entDisDetail,
                            entId: item.id
                        })
                    })
                    _that.setState({
                        list
                    })
                } else {
                    _that.setState({
                        // itemStatus: false,
                        status: true
                    })
                }
            }, 1000)
        })
    }

    // 防抖事件
    getItemList = (fn, delay) => {
        return function () {
            let context = this, args = arguments
                clearTimeout(fn.id)
            fn.id = setTimeout(() => {
                fn.apply(context, args)
            }, delay)
        }
    }

    onChangeHandle(value) {
        let { itemStatus, status, company } = this.state
        if(value === company){
            return
        }
        let selectList = []
        let debounce = this.getItemList(this.getList,600)  
        const _that = this
        if (value.length >= 4 && itemStatus) {
            debounce(value,_that)
        } else if (value.length === 0) {
            itemStatus = true
        } else {
            status = false
            selectList = []
        }
        this.setState({
            itemStatus,
            status,
            list: selectList,
            company: value
        })
    }

    onClickHandle(item) {
        let { name } = item
        sessionStorage.setItem('companyList', JSON.stringify(item))
        this.setState({
            company: name,
            list: []
        }, () => {
            Taro.navigateBack({
                delta: 1
            })
        })
    }

    render() {
        const { list, company, status } = this.state
        return (
            <View className="b_selectbusiness">
                <DNavBar title='选择企业'></DNavBar>
                <View className="b_selectbusiness__box">
                    {
                        status && <View className="b_selectbusiness__tips">
                            <Text>企业名称请与营业执照名称一致</Text>
                        </View>
                    }
                    <View className="b_selectbusiness__content b_selectbusiness__form">
                        <View>
                            <AtForm>
                                <DAtInpute value={company} onChange={this.onChangeHandle.bind(this)} title='企业名称' placeholder='可搜索企业名称或社会信用代码'></DAtInpute>
                            </AtForm>
                        </View>
                    </View>
                    <View className="b_selectbusiness__content">
                        {
                            list && list.map((item, i) => {
                                return <View className='item_title' key={i} onClick={this.onClickHandle.bind(this, item)}>
                                    <Text className="item_title__left">{item.company}</Text>
                                </View>
                            })
                        }
                    </View>
                </View>
            </View>
        )
    }
}
